<!--<template>-->
<!--<div id="container" style="width: 100%;height: 100vh">-->

<!--</div>-->
<!--</template>-->


<!--<script>-->
<!--// map.on('click',clickHandler)-->
<!--var content = [-->
<!--  "<div><b>{{msg}}</b>",-->
<!--  "电话 : 010-84107000   邮编 : 100102",-->
<!--  "地址 : 北京市望京阜通东大街方恒国际中心A座16层</div>",-->
<!--];-->
<!--import AMapLoader from '@amap/amap-jsapi-loader';-->
<!--export default {-->

<!--  name: "Map.vue",-->
<!--  data(){-->
<!--    return{-->
<!--       msg:'hh',-->

<!--    }-->
<!--  },-->
<!--  mounted() {-->


<!--    // var position = new AMap.LngLat(116.397428, 39.90923);-->
<!--    // 创建地图实例-->
<!--    var map = new AMap.Map("container", {-->
<!--      zoom: 13,-->
<!--      center:[116.372624,23.55187]-->
<!--      // resizeEnable: true-->

<!--    });-->
<!--    var contextMenu = new AMap.ContextMenu();//添加右键菜单-->
<!--    //右键放大-->
<!--    contextMenu.addItem("放大一级", function () {-->
<!--      map.zoomIn();-->
<!--    }, 0);-->
<!--//右键缩小-->
<!--    contextMenu.addItem("缩小一级", function () {-->
<!--      map.zoomOut();-->
<!--    }, 1);-->



<!--    //地图绑定鼠标右击事件——弹出右键菜单-->
<!--    map.on('rightclick', function (e) {-->
<!--      contextMenu.open(map, e.lnglat);-->

<!--    });-->


<!--    var clickHandler = function(e) {-->
<!--      console.log('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');-->
<!--       infoWindow.open(map, map.getCenter());-->

<!--    };//添加点击标点事件-->

<!--    //创建 infoWindow 实例-->
<!--    var infoWindow = new AMap.InfoWindow({-->
<!--      content: content.join("<br>"), //传入字符串拼接的 DOM 元素-->
<!--      anchor: "top-left",-->
<!--    });-->



<!--    const marker = new AMap.Marker({-->
<!--      position: new AMap.LngLat(116.372624,23.55187),//Marker 经纬度-->
<!--      icon: "//vdata.amap.com/icons/b18/1/2.png",-->
<!--      title:'揭阳市人民政府'-->
<!--    });-->

<!--    const marker2 = new AMap.Marker({-->
<!--      position: new AMap.LngLat(116.32619,23.521968),//Marker 经纬度-->
<!--      icon: "//vdata.amap.com/icons/b18/1/2.png",-->
<!--      title:'乐园'-->
<!--    });-->
<!--    marker.on('click',clickHandler)-->
<!--    map.on('click',clickHandler)-->




<!--    map.add(marker,marker2);-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->

<!--</style>-->
<template>
  <div id="container" style="width: 100%;height: 100vh"></div>
  <!-- 设置宽和高 -->
</template>

<script>
import {Decimal} from 'decimal.js'
export default {
  data() {
    return {
      //要标记的所有点的经纬度
        Coordinate:[]
      //  Coordinate:[
      //    {
      //      lng:"54.323243",
      //      lat:"43.654322"
      //    }
      //  ]  //后端返回的数据格式

    }
  },
  mounted() {
    this.carGPSIP()
  },
  methods: {
    carGPSIP() {
      var map = new AMap.Map("container",
          {resizeEnable: true});//初始化地图
      //信息窗口实例
      var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
      //遍历生成多个标记点 因后端返回是map格式因此需要判断code
     this.request.get('Pbss/list').then(res => {
        if (res.code === '200') {
          console.log(res);
          this.Coordinate=res.data
          console.log(this.Coordinate)
          this.Coordinate = res.data; //拿到数据
          let Coordinate=res.data;
            //定义Coordinate
          for (var i = 0; i < this.Coordinate.length; i++) {
            var marker = new AMap.Marker({
              position: new AMap.LngLat( Coordinate[i].addrY,  Coordinate[i].addrX), //不同标记点的经纬度
              icon:Coordinate[i].sendCount>5?"//vdata.amap.com/icons/b18/1/2.png":'',
              map: map,

            });
            marker.content ="投放点名称："+ Coordinate[i].pbssName+","+"充电宝数量："+Coordinate[i].pbCount ;
            marker.on("click", markerClick);
            marker.emit("click", { target: marker }); //默认初始化不出现信息窗体,打开初始化就出现信息窗体
          }
          function markerClick(e) {
            infoWindow.setContent(e.target.content);
            infoWindow.open(map, e.target.getPosition());
          }
          map.setFitView();
        }
      });
      function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
      }
      map.setFitView();

    }
  },
}
</script>


<style>

</style>
